@import "../variables.less";

.department {
  width: 100%;
  height: 100%;

  .left, .middle, .right {
    height: 100%;
    display: inline-block;
    float: left;
    box-sizing: border-box;
  }

  .left {
    width: 18.33%;
    padding: 0.4rem 0.4rem 0.4rem 0;
    background-color: @bgColor;

    .el-form {
      margin-left: 0.4rem;
      height: calc(0.68rem + 22px);
    }

    .area-con {
      width: 100%;
      height: calc(100% - 0.68rem - 22px);
      overflow: auto;
      float: left;
    }

    .area {
      display: inline-block;
      width: calc(50% - 0.4rem);
      height: 0.96rem;
      line-height: 0.96rem;
      float: left;
      margin-left: 0.4rem;
      margin-bottom: 0.31rem;
      font-size: 0.34rem;
      background: url("../../assets/department/area_bg.png");
      background-size: 100% 100%;
      cursor: pointer;
      opacity: 0.85;

      img {
        margin:0.28rem 0.2rem;
        width: 0.32rem;
        height: 0.4rem;
        float: left;
      }

      .area-name {
        color: #ffffff;
        font-family: 'SourceHanSansCN-Regular';
      }

      .area-value {
        color: #F6FF69;
        font-family: SourceHanSansCN-Bold;
        display: inline-block;
        float: right;
        width: 1rem;
        height: 100%;
        text-align: center;
        font-weight: bold;
      }
    }

    .area:hover {
      opacity: 1;
    }

    .logistics {
      img {
        width: 0.65rem;
        height: 0.65rem;
        margin:0.15rem 0.2rem;
      }

      .area-right {
        width: calc(100% - 1.05rem);
        height: 100%;
        float: left;

        .area-name {
          width: 55%;
        }

        .area-value {
          width: 45%;
        }
      }

      .area-name, .area-value {
        height: 100%;

        span {
          display: block;
        }

        span:first-child {
          height: 65%;
          line-height: 2.3;
        }

        span:last-child {
          height: 35%;
          line-height: 1;
          color: #AAC9F6;
          font-size: 0.18rem;
          font-family: 'SourceHanSansCN-Medium';
        }
      }

      .area-name {
        float: left;

        @media screen and (max-width: 1920px) {
          span:first-child {
            height: 100%;
            line-height: 0.96rem;
          }

          span:last-child {
            display: none;
          }
        }
      }

      .area-value {
        float: right;
      }
    }

    .normal {
      background: url("../../assets/department/normal_bg.png");
      background-size: 100% 100%;
    }

    .alarm {
      background: url("../../assets/department/alarm_bg.png");
      background-size: 100% 100%;
    }

    .trans {
      background: url("../../assets/department/trans_bg.png");
      background-size: 100% 100%;
    }

    .active {
      box-shadow:0 0 10px #ffffff;
    }
  }

  .middle {
    width: calc(52.25% - 0.6rem);
    margin-right: 0.6rem;

    .top {
      float: left;
      width: 100%;

      .statistic {
        width: calc(100% / 7 - 0.6rem);
        height: 2.7rem;
        margin-left: 0.6rem;
        background-color: @bgColor;
        float: left;
        text-align: center;
        border-radius: 0.15rem;

        img {
          width: 0.58rem;
          height: 0.58rem;
        }

        .statistic-name {
          display: block;
          font-size: 0.3rem;
          color: #ffffff;
          margin-top: -0.15rem;
        }

        .statistic-value {
          display: block;
          font-size: 0.62rem;
          color: #1BFEEF;
        }
      }
    }

    .bottom {
      width: calc(100% - 0.6rem);
      height: calc(100% - 3.1rem);
      margin-top: 0.4rem;
      margin-left: 0.6rem;
      float: left;
      background-color: @bgColor;
    }

    .outpatient {
      height: 100%;
    }

    .logistics {
      height: 100%;
      .top {
        .month-or-year {
          width: 0.7rem;
          height: 2.7rem;
          line-height: 1.35rem;
          margin-left: 0.6rem;
          float: left;

          span {
            display: block;
            height: 50%;
            width: 100%;
            font-size: 0.4rem;
            text-align: center;
            color: #52B9EA;
            border: #0B8EC4 0.03rem solid;
            border-bottom: 0;
            box-sizing: border-box;
            cursor: pointer;
            background-color: @bgColor;
          }

          span:last-child {
            border-bottom: #0B8EC4 0.03rem solid;
          }

          span:hover, .active {
            background-color: rgba(255,255,255,0.2);
            color: #1BFEEF;
          }

        }

        .statistic-con {
          width: calc(100% - 1.3rem);
          float: left;
          .statistic {
            width: calc(100% / 7 - 0.6rem);
          }
        }


      }
    }
  }

  .right {
    width: 29.42%;

    .right-top {
      width: 100%;
      height: 2.7rem;
      background-color: @bgColor;
      margin-bottom: 0.4rem;

      .outpatient-info-item {
        width: 20%;
      }
    }

    .right-middle {
      width: 100%;
      height: calc((100% - 3.5rem) / 2);
      background-color: @bgColor;
      margin-bottom: 0.4rem;

      .description {
        height: calc(100% - 0.65rem - 15px);
      }
    }

    .right-bottom {
      width: 100%;
      height: calc((100% - 3.5rem) / 2);
      background-color: @bgColor;
    }

    .right-top-logistics {
      width: 100%;
      height: 60%;
      background-color: @bgColor;
    }

    .right-middle-logistics {
      width: 100%;
      height: calc(40% - 0.4rem);
      margin-top: 0.4rem;

      .right-middle-left-logistics {
        width: 45%;
        height: 100%;
        float: left;
        background-color: @bgColor;
      }

      .right-middle-right-logistics {
        width: calc(55% - 0.6rem);
        height: 100%;
        margin-left: 0.6rem;
        float: left;
        background-color: @bgColor;
      }
    }


  }
}
